<template>
  <div>
    <van-nav-bar>
      <template #title>
        <h3>发布房源</h3>
      </template>
      <template #left>
        <van-icon name="arrow-left" size="5vw" @click="gortuer" />
      </template>
    </van-nav-bar>
    <van-cell-group>
      <van-cell title="房源信息" class="grom" />
      <van-cell title="小区名称" class="residential">
        <template #default>
          <van-field
            v-model="value"
            placeholder="请输入小区名称"
            input-align="right"
            height="120vw"
          >
            <template #right-icon>
              <van-icon name="arrow" size="6vw" />
            </template>
          </van-field>
        </template>
      </van-cell>
      <van-cell>
        <div class="box">
          <div class="rent">
            <p>租&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;金</p>
          </div>
          <div class="input">
            <van-cell-group>
              <van-field
                v-model="valuel"
                placeholder="请输入租金/月"
                :border="false"
              />
            </van-cell-group>
          </div>
          <div class="moon"><p>￥/月</p></div>
        </div>
      </van-cell>
      <van-cell>
        <div class="box">
          <div class="rent"><p>建筑面积</p></div>
          <div class="input">
            <van-cell-group>
              <van-field v-model="valuelr" placeholder="请输入建筑面积" />
            </van-cell-group>
          </div>
          <div class="moon"><p>㎡</p></div>
        </div>
      </van-cell>
      <van-cell>
        <template #title>
          <div>户&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型</div>
        </template>
        <template #default>
          <van-cell is-link @click="show = true">
            <template #title>
              <p>请选择</p>
            </template>
          </van-cell>
          <van-action-sheet v-model="show" :round="false">
            <template #default>
              <div class="content">
                <div class="butt">
                  <p>取消</p>
                  <p>确认</p>
                  <van-divider />
                </div>
              </div>
            </template>
          </van-action-sheet>
        </template>
      </van-cell>
      <van-cell title="所在楼层" value="内容">
        <template #default>
          <van-cell is-link title="请选择" @click="show = true">
            <template #title>
              <p>请选择</p>
            </template>
          </van-cell>
        </template>
      </van-cell>
      <van-cell value="内容">
        <template #title>
          <div>朝&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;向</div>
        </template>
        <template #default>
          <van-cell is-link title="请选择" @click="show = true">
            <template #title>
              <p>请选择</p>
            </template>
          </van-cell>
        </template>
      </van-cell>
      <van-cell title="房屋标题" />
      <van-field
        v-model="value"
        placeholder="请输入标题（例如：整租 小区名 2室 5000元）"
      />
      <span class="image">房屋图像</span>
      <van-divider />
      <van-uploader :after-read="afterRead" />
      <br />
      <span class="image">房屋配置</span>
      <van-divider />
      <van-grid :column-num="5" :border="false">
        <van-grid-item text="文字">
          <template #text>
            <van-icon class-prefix="my-icon" name="yg" />衣柜
          </template>
        </van-grid-item>
        <van-grid-item text="文字">
          <template #text>
            <van-icon class-prefix="my-icon" name="xyj" />洗衣机
          </template>
        </van-grid-item>
        <van-grid-item text="文字">
          <template #text>
            <van-icon class-prefix="my-icon" name="kt" />空调
          </template>
        </van-grid-item>
        <van-grid-item text="文字">
          <template #text>
            <van-icon class-prefix="my-icon" name="trq" />天然气
          </template>
        </van-grid-item>
        <van-grid-item text="文字">
          <template #text>
            <van-icon class-prefix="my-icon" name="bx" />冰箱
          </template>
        </van-grid-item>
        <van-grid-item text="文字">
          <template #text>
            <van-icon class-prefix="my-icon" name="nq" />暖气
          </template>
        </van-grid-item>
        <van-grid-item text="文字">
          <template #text>
            <van-icon class-prefix="my-icon" name="dsj" />电视
          </template>
        </van-grid-item>
        <van-grid-item text="文字">
          <template #text>
            <van-icon class-prefix="my-icon" name="rsq" />热水器
          </template>
        </van-grid-item>
        <van-grid-item text="文字">
          <template #text>
            <van-icon class-prefix="my-icon" name="kd" />宽带
          </template>
        </van-grid-item>
        <van-grid-item text="文字">
          <template #text>
            <van-icon class-prefix="my-icon" name="sf" />沙发
          </template>
        </van-grid-item>
      </van-grid>
    </van-cell-group>
    <div class="housBut">
      <van-button type="default" class="cancellation">取消</van-button>
      <van-button type="primary">确认</van-button>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
export default {
  name: 'Gohire',
  props: {},
  data () {
    return {
      radio: '1',
      show: false,
      areaList: '',
      value: '',
      valuel: '',
      valuelr: '',
      houseType: '',
      actions: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }]
    }
  },
  methods: {
    // 上传图片
    afterRead (file) {
      // 此时可以自行将文件上传至服务器
      console.log(file)
    },
    gortuer () {
      this.$router.go(-1)
    },
    onSelect (item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false
      Toast(item.name)
    },

    // 选择房间
    selectup () {
      console.log(1)
      this.flag = true
    }
  }
}
</script>

<style scoped lang="less">
@font-face {
  font-family: 'my-icon';
  src: url('../assets/iconfont/iconfont.ttf') format('truetype');
}

.my-icon {
  font-family: 'my-icon';
  font-weight: 400;
  font-style: normal;
  font-size: 6vw;
}

.my-icon-extra::before {
  content: '\e626';
}
.image {
  font-size: 4vw;
  margin-left: 4vw;
}
.van-grid {
  margin-bottom: 10vw;
}
.housBut {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  width: 100%;
  .cancellation {
    color: #21b97a;
  }
  /deep/ .van-button {
    flex: 1;
  }
}
.content {
  .butt {
    display: flex;
    justify-content: space-between;
    margin-top: -5vw;
    /deep/ .van-divider {
      position: absolute;
      width: 100%;
      margin-top: 12vw;
    }
    p {
      color: #109cef;
    }
  }
}
.content {
  padding: 16px 16px 160px;
}
.box {
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 3vw;
  .rent {
    flex: 4;
    p {
      width: 18vw;
      color: #333;
    }
  }
  .input {
    flex: 10;
  }
  .moon {
    flex: 2;
    margin-right: 4vw;
    p {
      text-align: right;
    }
  }
}
/deep/ .van-cell {
  height: 13vw;
  align-items: center;
}
.van-cell-group {
  /deep/ .van-field {
    margin-right: 0;
  }
}
.grom {
  color: #21b97a;
}
.residential {
  height: 13vw;
  align-items: center;
}
h3 {
  font-weight: normal;
}
/deep/ .van-cell__title {
  /deep/ span {
    width: 15vw;
  }
}
p {
  font-size: 4vw;
  color: #888888;
}
.my-icon-xyj:before {
  content: '\e67d';
}

.my-icon-bx:before {
  content: '\e603';
}

.my-icon-kt:before {
  content: '\e65b';
}

.my-icon-rsq:before {
  content: '\e6fc';
}

.my-icon-dsj:before {
  content: '\e90a';
}

.my-icon-sf:before {
  content: '\e61c';
}

.my-icon-yg:before {
  content: '\e60a';
}

.my-icon-nq:before {
  content: '\e60f';
}

.my-icon-trq:before {
  content: '\e653';
}

.my-icon-kd:before {
  content: '\e875';
}

.my-icon-fh:before {
  content: '\e600';
}

.my-icon-dt:before {
  content: '\e906';
}

.my-icon-hz:before {
  content: '\e62f';
}

.my-icon-zf:before {
  content: '\100e7';
}
</style>
